<template>
  <div class="box" :style="{overflow: 'auto'}">
    <div class="title" :class="{ fixed: isFixed }">
      <router-link
        tag="img"
        :to="{ name: 'order' }"
        src="https://axhub.im/pro/221031c5a692ef70/images/%E8%AE%A2%E5%8D%95%E7%A1%AE%E8%AE%A4/u52.png"
        alt=""
      />
      确认订单</div>
    <div class="number"><span>010</span>号桌</div>
    <div class="wrapper" ref="wrapper" >
      <div class="content" >
        <div class="item" v-for="item in dataList" :key="'czt'+item.id">
          <img v-lazy="item.ImageUrl"/>
          <p class="name">{{item.name | mysubstr(10)}}</p>
          <p class="count">X<em>{{ item.count }}</em></p>
          <p class="price">￥<em>{{ item.currentPrice }}</em></p>
        </div>
      </div>
    </div>
    <div class="ticket">
      <div class="discounts">
        <div class="discounts1">
          <b>新</b>
          <p>新用户首单立减</p>
          <span style="margin-right:20px;">- ￥5</span>
        </div>
        <router-link tag="div" :to="{ name: 'selectCoupons' }" class="discounts1" >
          <b>惠</b>
          <p>优惠券</p>
          <img src="https://axhub.im/pro/221031c5a692ef70/images/%E8%AE%A2%E5%8D%95%E7%A1%AE%E8%AE%A4/u52.png" alt="">
          <span>- ￥5</span>
          
        </router-link>
      </div>
      <div class="total">
        <span>小计<i>￥</i><em>{{priceTotal}}</em></span>
        <span>已优惠 <i>￥</i><em>10</em></span>
      </div>
    </div>
    <van-cell ref="peo_number" value="1人" is-link @click="show = true">
      <template #title>
        <span class="custom-title">就餐人数</span>
      </template>
    </van-cell>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
    <div class="beizhu">
      <p>备注</p>
      <input type="text" placeholder="请输入口味，偏好等要求" />
    </div>
    <div class="money">
      <p class="next">应付金额 <span>￥{{priceTotal-10}}</span></p>
      <p class="now" @click="showpay = true" >立即支付</p>
      <van-dialog v-model="showpay"  @confirm="confirm" title="支付成功">
      </van-dialog>
    </div>
  
  </div>
</template>


<script>

import Vue from "vue";
import BScroll from "better-scroll";
import { ActionSheet, Toast, Cell, CellGroup, Dialog } from "vant";

Vue.use(ActionSheet);
Vue.use(Toast);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Dialog);

export default {
  data() {
    return {
      show: false,
      showpay:false,
      isFixed: false,
      dataList: [],
      actions: [
        { name: "1人" },
        { name: "2人" },
        { name: "3人" },
        { name: "4人" },
        { name: "5人" },
        { name: "6人" },
        { name: "7人" },
        { name: "8人" },
        { name: "9人" },
        { name: "10人" },
        { name: "11人" },
        { name: "12人以上" },
      ],
      priceTotal:0
    };
  },
  methods: {
    // 人数选择
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      this.$refs.peo_number.children[1].innerHTML=item.name
    },
    // 支付成功返回首页
    confirm(){
      this.$store.state.footerNavShow = true
      this.$router.push("/home")
    }
  },

  // 让底部菜单隐藏
  created() {
    this.$store.state.footerNavShow = false
  },
  async mounted () {
      // 1、监听屏幕滚动
      window.addEventListener("scroll", (e) => {
      // 2、获取滚动条距离顶部高度
      let scrollTop = document.documentElement.scrollTop;
      // 6、根据滚动条高度来决定是否吸顶
      if (scrollTop >= 50) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    });
    //获取数据
    // let ret = await this.$api.getOrderList()
    this.dataList = this.$store.state.orderdata
    for(let i = 0; i<this.dataList.length;i++){
      this.priceTotal+=this.dataList[i].currentPrice*this.dataList[i].count
    }

    this.priceTotal=Math.round(this.priceTotal*100)/100-10
    if(this.priceTotal <=0){this.priceTotal = 0}
  }
};
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #e4e4e4;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  background: #fff;
  img {
      width: 30px;
      height: 30px;
      transform: rotate(90deg);
      float: left;
      margin: 6px 0 0 10px;
    }
}
.fixed {
  position: fixed;
  top: 0;
}
.number {
  width: 100%;
  height: 40px;
  color: #ed0d0d;
  line-height: 40px;
  padding-left: 10px;
  border-bottom: 7px solid #f5f5f5;
  font-size: 14px;
}
.content {
  width: 100%;
  border-bottom: 1px solid #f2f2f2;
  .item {
    width: 100%;
    height: 98px;
    padding: 14px;
    box-sizing: border-box;
    img {
      float: left;
      width: 70px;
      height: 70px;
      margin-right: 12px;
    }
    .name {
      height: 40px;
      line-height: 30px;
      font-size: 16px;
      width: 180px;
      float: left;
      color: #333;
    }
    .count {
      font-size: 12px;
      color: #666;
      width: 180px;
      float: left;
    }
    .price {
      float: right;
      color: #ed0d0d;
    }
  }
}
.ticket {
  width: 100%;
  .discounts {
    width: 100%;
    font-size: 14px;
    .discounts1 {
      padding: 10px 17px;
      box-sizing: border-box;
      width: 100%;
      height: 40px;
      line-height: 20px;
      b {
        float: left;
        color: #fff;
        background: rgba(255, 153, 0, 1);
        width: 17px;
        height: 17px;
        font-size: 11px;
        line-height: 17px;
        text-align: center;
        font-weight: normal;
        margin-right: 10px;
      }
      &:nth-of-type(2) b {
        background: #ff6633;
      }
      p {
        float: left;
      }
      span {
        float: right;
      }
      img{
        width: 20px;
        height: 20px;
        transform:rotate(-90deg);
        float: right;
      }
    }
  }
}
.total {
  border-top: 2px solid #f2f2f2;
  width: 100%;
  height: 44px;
  font-size: 14px;
  color: #666;
  line-height: 44px;
  border-bottom: 5px solid #f5f5f5;
  span {
    float: right;
    margin-right: 10px;
    i {
      font-size: 11px;
      color: #ed0d0d;
    }
    em {
      font-size: 14px;
      color: #ed0d0d;
    }
    &:nth-of-type(1) em {
      font-size: 16px;
    }
  }
}
.beizhu {
  border-top: 5px solid #f5f5f5;
  width: 100%;
  height: 44px;
  position: relative;
  color: #666;
  margin-bottom: 70px;
  p {
    position: absolute;
    top: 13px;
    left: 15px;
    font-size: 14px;
  }
  input {
    width: 100%;
    height: 44px;
    border: none;
    padding-left: 70px;
    font-size: 14px;
  }
}

.money {
  position: fixed;
  bottom: 20px;
  left: 28px;
  width: 300px;
  height: 38px;
  .next {
    background: #666666;
    width: 200px;
    border-radius: 20px 0 0 20px;
  }
  .now {
    width: 100px;
    background: #ed0d0d;
    border-radius: 0 20px 20px 0;
  }
  p {
    color: #fff;
    float: left;
    height: 100%;
    line-height: 38px;
    text-align: center;
  }
}
 .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
</style>